<template>
    <div class="footer">
        <div class="center">
            <div class="copyright">
                <a href="#/">首页</a>|<a href="#/about/default">公司信息</a>|<a href="#/business">业务体系</a>|<a href="#/duty/0">社会责任</a>|<a href="#/about/contact">联系我们</a>
                <p>Copyright&nbsp;&copy;&nbsp;2017&nbsp;IntellVision.&nbsp;All&nbsp;Rights&nbsp;Reserved.&nbsp;智媒云图&nbsp;版权所有</p>
            </div>
            <div class="logo">
                <i></i>
            </div>
        </div>
    </div>
</template>

<style rel="stylesheet/less" lang="less" scoped>
    @import '~assets/css/less.less';

    .footer{font-size:14px; width:100%; height:140px; background:#EEF0F3; clear:both;
        .center{display: table; height:100%;}
        .copyright{display: table-cell; vertical-align: middle;
            a{color:#5C6066; margin:0 10px;
                &:first-child{margin-left:0;}
            }
            p{font-size:12px;}
        }
        .logo{vertical-align: middle;display: table-cell; text-align:right;
            i{display:inline-block; width:160px; height:65px; background:#000; vertical-align: bottom; background:url("~assets/img/logo_blue.png") 50% 50%/contain no-repeat;}
        }
    }

    @media screen and (max-width: @maxwidth){
        .footer{padding:50/@rem 0; height:auto;
            .center{width:100%; height:100%;}
            .copyright{display: block; text-align: center; margin-bottom:30/@rem;
                a{color:#5C6066; margin:0 10px;
                    &:first-child{margin-left:0;}
                }
                p{font-size:20/@rem;}
            }
            .logo{display: block; text-align: center;
                i{display:inline-block; width:160px; height:65px; vertical-align: bottom; background:url("~assets/img/logo_blue.png") 50% 50%/contain no-repeat;}
            }
        }
    }
</style>